<template>
  <PageWrapper title="产品设置">
    <div id="productSet">
      <a-row :gutter="[24, 16]">
        <a-col v-for="item in productList" :span="8">
          <div class="product">
            <div class="top">
              产品名称：<a-input v-model:value="item.softwareName" size="small" placeholder="" :bordered="false" />
              <a-checkbox v-model:checked="item.hasCheck"
                @change="checkProduct(item.hasCheck, item.softwareId)"></a-checkbox>
              <span class="ml-4"> {{ item.softwareId }}</span><span>{{ item.status }}</span>
            </div>
            <div class="bottom">
              <div>
                <a-checkbox v-model:checked="item.hasBlurb" class="checkbox"></a-checkbox>
                <a @click="openProfile(item.softwareId, item.softwareName)">简介</a>
              </div>
              <div>
                <a-checkbox v-model:checked="item.hasManual" class="checkbox"></a-checkbox>
                <a @click="openGuide(item.softwareId)">操作指南</a>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
      <div class="btn-group mt-4">
        <a-space>
          <a-button @click="onLine">上线</a-button><a-button danger @click="onPause">暂停</a-button><a-button type="primary"
            @click="onSend">发送</a-button><a-button type="primary" danger @click="onDelete">删除</a-button>
        </a-space>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'
import { router } from '/@/router'
import { Modal, message } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import { getProductList, online, pause, sendProduct, deleteProduct } from '/@/api/sys/product'

const checked = ref(false)
const token = localStorage.getItem('TOKEN_KEY')
const targetId = ref(0)
interface DataType {
  softwareId: string
  softwareName: string
  pause: boolean
  hasCheck: boolean
  hasBlurb: boolean
  hasManual: boolean
  status: string
}
const productList = ref<DataType[]>([])
//上线
async function onLine() {
  if (!targetId.value) {
    message.warning('请先选择一项数据')
    return
  }
  const res = await online({
    token,
    data: {
      id: targetId.value,
    },
  })
  if (res.success === 1) {
    message.success('成功')
    targetId.value = 0
    getTable()
  } else {
    message.error(res.message)
  }

}
//暂停
async function onPause() {
  if (!targetId.value) {
    message.warning('请先选择一项数据')
    return
  }
  const res = await pause({
    token,
    data: {
      id: targetId.value,
    },
  })

  if (res.success === 1) {
    message.success('成功')
    targetId.value = 0
    getTable()
  } else {
    message.error(res.message)
  }
}
//发送
async function onSend() {
  if (!targetId.value) {
    message.warning('请先选择一项数据')
    return
  }
  const res = await sendProduct({
    token,
    data: {
      id: targetId.value,
    },
  })
  if (res.success === 1) {
    message.success('成功')
    targetId.value = 0
    getTable()
  } else {
    message.error(res.message)
  }
}
//删除
async function onDelete() {
  if (!targetId.value) {
    message.warning('请先选择一项数据')
    return
  }
  Modal.confirm({
    title: '确定要删除吗?',
    async onOk() {
      const res = await deleteProduct({
        token,
        data: {
          id: targetId.value,
        },
      })
      if (res.success === 1) {
        message.success('删除成功')
        targetId.value = 0
        getTable()
      } else {
        message.success(res.message)
      }
    },
    onCancel() {
      console.log('Cancel');
    },
  });

}
function checkProduct(value, id) {
  if (value) {
    productList.value.map((item) => {
      if (item.softwareId !== id) {
        item.hasCheck = false
      }
    })
    targetId.value = id
  } else {
    targetId.value = 0
  }
}

async function getTable() {
  const res = await getProductList({
    token,
  })
  productList.value = res.data.map((item) => {
    item.hasCheck = false
    return item
  })
  console.log(res)
}
// 页面加载时自动执行
onMounted(() => {
  getTable()
})
const openProfile = (id, name) => {
  router.push({
    path: '/dashboard/profile',
    query: { id, name },
  })
}
const openGuide = (id) => {
  router.push({ path: '/dashboard/guide', query: { id } })
}
</script>
<style scoped lang="less">
#productSet {
  .product {
    background-color: #fff;
    border: 1px solid #d9d9d9;

    .top {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d9d9d9;
      padding: 10px 12px;

      input {
        width: 200px;
      }
    }

    .bottom {
      padding: 10px 12px;
      display: flex;
      justify-content: space-between;

      .checkbox {
        margin-right: 10px;
      }
    }
  }

  .btn-group {
    display: flex;
    justify-content: end;
  }
}
</style>
